<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="">
    <meta name="" http-equiv="">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div> <!--组件-->
        <com></com>
        <panda v-bind:here="message"></panda>
        <city></city>
    </div>
    <div>
        <input type="text" v-model="message">
    </div>
    <div>
        <component v-bind:is="who"></component>
        <button @click="ChangeComponent">ChangeComponent</button>
    </div>
    
</div>
<script src="lib/vue.js"></script>
<script>
    Vue.component('com',{ //全局组件
        template: `<div style="color:red">com组件</div>`
    })
    //构造器外部写局部注册组件
    var ar = {
        template: `<div>区域</div>`
    }
    var city = {
        template: `<div>
                    <p>城市</p>
                    <ar></ar>
        </div>`,
        components: {
            "ar": ar,
        }
    }
    var componentA={
        template:`<div>componentA</div>`
    }
    var componentB={
        template:`<div>componentB</div>`
    }
    var componentC={
        template:`<div>componentC</div>`
    }
    var app=new Vue({
        el: '#app',
        data: {
            message: "宇宙就是一座黑暗森林，每个文明都是带枪的猎人，像幽灵般潜行于林间，轻轻拨开挡路的树枝，竭力不让脚步发出一点儿声音，连呼吸都必须小心翼翼：他必须小心，因为林中到处都有与他一样潜行的猎人，如果他发现了别的生命，能做的只有一件事：开枪消灭之。在这片森林中，他人就是地狱，就是永恒的威胁，任何暴露自己存在的生命都将很快被消灭，这就是宇宙文明的图景，这就是对费米悖论的解释",
            who:'componentA'
        },
        components: {
            "panda": {
                template: `<div style="color:green">panda组件的here属性值是 {{here}}</div>`,
                props:['here']
            },
            "city":city,
            "componentA":componentA,
            "componentB":componentB,
            "componentC":componentC,
        },
        methods:{
            ChangeComponent:function(){
                if(this.who=='componentA'){
                    this.who='componentB'
                }else if(this.who=='componentB'){
                    this.who='componentC'
                }else{
                    this.who='componentA'
                }
            }
        }
    })
</script>
</body>
</html>